<template>
    <div class="">
        <vxe-table class="myVxeTable" :data="tableData" ref="tableRef" height="100%" :scroll-y="{enabled: true, gt: 20}">
            <vxe-column field="dictDeptCfgCategory" title="部门" min-width="200">
                <template #default="{ row }">
                    <el-select v-model="row.dictDeptCfgCategory" clearable multiple placeholder="请选择" :disabled="isRead">
                        <el-option v-for="item in deptCfgCategoryList" :key="item.code" :label="item.name"
                            :value="item.code"></el-option>
                    </el-select>
                </template>
            </vxe-column>
            <vxe-column field="forRiskBusinessId" title="风控项目" min-width="130">
                <template #default="{ row, rowIndex }">
                    <select-sim v-model="row.forRiskBusinessId" :property="'riskIndexSelect'" :disabled="isRead"
                        :dictDeptCfgCategory="(row.dictDeptCfgCategory).toString()" :defaultList="[{
            id: row.forRiskBusinessId,
            name: row.riskBusinessName
        }]" :index="rowIndex" @save="saveSim01" style="width: 100%;" />
                </template>
            </vxe-column>
            <vxe-column field="params" title="参数映射" align="center" width="80">
                <template #default="{ row, rowIndex }">
                    <div style="display: flex; justify-content: center;">
                        <svg-icon class="tableSvg" name="risk-mapping" width="16px" height="16px"
                            :color="row.params && row.params.length > 0 ? 'var(--el-color-primary)' : 'var(--vxe-ui-font-color)'"
                            @click="clickMapping(row, rowIndex)"></svg-icon>
                    </div>
                </template>
            </vxe-column>
            <vxe-column title="操作" align="center" width="80" v-if="!isRead">
                <template #header>
                    <div class="optPart">
                        <span>操作</span>
                        <el-icon class="myIcon" @click="clickAdd">
                            <CirclePlus />
                        </el-icon>
                    </div>
                </template>
                <template #default="{ rowIndex }">
                    <el-icon class="myIcon" title="删除" @click="clickDelete(rowIndex)">
                        <Delete />
                    </el-icon>
                </template>
            </vxe-column>
        </vxe-table>
        <mapping :initMsg="mapMsg" :isRead="isRead" @closeDig="isMapVisible = false" @save="saveMap" v-if="isMapVisible" />
    </div>
</template>

<script setup lang="ts">
import { Delete, CirclePlus } from '@element-plus/icons-vue'
import type { Dict } from '@/api/pub/type.ts';
import selectSim from '@/components/remoteSelect/simple.vue';
import Mapping from './mapping.vue';
import { dictsToArr } from '@/utils/public';

const props = withDefaults(defineProps<{
    pageSrc?: string,
    initMsg: any[],
    isRead: boolean
}>(), {
    pageSrc: '',
    initMsg: () => [],
    isRead: false
});
watch(() => props.initMsg, (val) => { 
    getTable(val);
});
let $emit = defineEmits(['reQuery']);

const dictList = autoDict();
const deptCfgCategoryList = ref<Dict[]>([]);
const tableData = ref<any[]>([]);

onMounted(() => {
    init()
})

const init = () => {
    getTable(props.initMsg);
    deptCfgCategoryList.value = dictList.DEPT_CFG_CATEGORY?.list.filter((item: any) => item.code !== '0');
};
const getTable = (list: any[]) => {
    // console.log('risk：',list);
    tableData.value = JSON.parse(JSON.stringify(list))
    tableData.value.forEach(item => {
        item.dictDeptCfgCategory = dictsToArr(item.dictDeptCfgCategory);
    });
};
const saveSim01 = (msg: any) => {
    tableData.value[msg.index].forRiskBusinessId = msg.value ? msg.value : null;
    tableData.value[msg.index].riskBusinessName = msg.item ? msg.item.name : '';
    tableData.value[msg.index].params = [];
    let params = msg.item && msg.item.params ? msg.item.params : [];
    params.forEach((item: any) => {
        tableData.value[msg.index].params.push({
            "name": item.name,
            "code": item.code,
            "dictDataPermColumnType": item.dictDataPermColumnType,
            "forDataPermSourceId": item.forDataPermSourceId,
            "classCode": item.classCode,
            "dictDateFormat": item.dictDateFormat,
            "isMoreValue": item.isMoreValue,
            "isNotNull": item.isNotNull,
            "columnCode": "",
            "columnName": "",
            "columnPath": "",
        })
    })

}
const clickAdd = () => {
    let paramInit = {
        "id": null,
        "dictDeptCfgCategory": [],
        "forRiskBusinessId": null,
        "riskBusinessName": '',
        "params": []
    }
    tableData.value.push(paramInit);
}
const clickDelete = (index: number) => {
    tableData.value.splice(index, 1);
}
const isMapVisible = ref(false);
const mapMsg = ref();
const clickMapping = (row: any, index: number) => {
    isMapVisible.value = true;
    mapMsg.value = {
        row: row,
        index: index
    };
}

const saveMap = (msg: any) => {
    tableData.value[msg.index].params = msg.params;
}
const save = () => {
    let subList = [];
    subList = tableData.value.map(item => {
        return {
            ...item,
            dictDeptCfgCategory: item.dictDeptCfgCategory.toString()
        };
    });
    return subList;
}
// 暴露save方法给父组件调用
defineExpose({
    save
});
</script>

<style scoped lang="scss">
.tableSvg {
    cursor: pointer;
}
</style>
